import { useEffect, useState } from "react"
import { useSelector, useDispatch, IRouteComponentProps } from 'umi'
import { Breadcrumb, Form, Input, Button, Select, Table, Pagination, ConfigProvider, Popconfirm, message } from 'antd';
const { Option } = Select;
import styles from "./view.less"
import zhCN from 'antd/es/locale/zh_CN';
import moment from "moment"
import { ImailList } from "@/utils/interface";

function confirm() {
    message.info('无访问权限');
}

const columns = [
    {
        title: 'URL',
        dataIndex: 'url',
        width: 200,
        render: (row: ImailList) => {
            return <a>{row}</a>
        }
    },
    {
        title: 'IP',
        dataIndex: 'ip',
        width: 150,
    },
    {
        title: '浏览器',
        dataIndex: 'browser',
        width: 150,
    },
    {
        title: '内核',
        dataIndex: 'engine',
        width: 150,
    },
    {
        title: '操作系统',
        dataIndex: 'os',
        width: 150,
    },
    {
        title: '设备',
        dataIndex: 'device',
        width: 100,
    },
    {
        title: '地址',
        dataIndex: 'address',
        width: 150,
    },
    {
        title: '访问量',
        dataIndex: 'count',
        width: 100,
        render: (row: ImailList) => {
            return <span style={{ display: "inline-block", width: "20px", height: "20px", background: "#52C41A", borderRadius: "50%", textAlign: "center", lineHeight: "20px", color: "#fff" }}>{row}</span>
        }
    },
    {
        title: '访问时间',
        dataIndex: 'createAt',
        width: 150,
        render: (row:ImailList) => {
            return <span>{moment(row.createAt).format('YYYY-MM-DD h:mm:ss')}</span>
          },
    },
    {
        title: '操作',
        fixed: 'right',
        width: 100,
        render: () => {
            return <Popconfirm placement="top" title="确定删除？" onConfirm={confirm} okText="Yes" cancelText="No">
                <span style={{ color: "#18AEFF", width: "100px" }}>删除</span>
            </Popconfirm>


        }
    },
];

const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    });
}


const View: React.FC<IRouteComponentProps> = () => {
    const [page, setPage] = useState(1)
    const [size, setSize] = useState(12)

    const state = useSelector((state: { view: any }) => state.view)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: "view/query",
            payload: {
                page,
                size
            }
        })
    }, [])

    useEffect(() => {
        dispatch({
            type: "view/query",
            payload: {
                page, size
            }
        })
    }, [page, size])


    const [form] = Form.useForm();

    const onFinish = (values: any) => {
        dispatch({
            type: "view/search",
            payload: {
                values
            }
        })
    };

    const onReset = () => {
        form.resetFields();
    };

    // 全选反选
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys)
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: (changableRowKeys: any) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key: any, index: number) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    setSelectedRowKeys(newSelectedRowKeys)
                },
            },
            {
                key: 'even',
                text: 'Select Even Row',
                onSelect: (changableRowKeys: any) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key: any, index: number) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    setSelectedRowKeys(newSelectedRowKeys)
                },
            },
        ],
    };

    return <div className={styles.view}>
        <div>
            <div>
                <div className={styles.bread}>
                    <Breadcrumb>
                        <Breadcrumb.Item>工作台</Breadcrumb.Item>
                        <Breadcrumb.Item>访问统计</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
            </div>
            <div>
                <div className={styles.form}>
                    <Form form={form} name="control-hooks" onFinish={onFinish} labelAlign="right">

                        <Form.Item name="ip" label="IP" >
                            <Input placeholder="请输入IP" />
                        </Form.Item>

                        <Form.Item name="userAgent" label="UA">
                            <Input placeholder="请输入UA" />
                        </Form.Item>

                        <Form.Item name="url" label="URL">
                            <Input placeholder="请输入URL" />
                        </Form.Item>

                        <Form.Item name="address" label="地址">
                            <Input placeholder="请输入地址" />
                        </Form.Item>

                        <Form.Item name="browser" label="浏览器">
                            <Input placeholder="请输入浏览器" />
                        </Form.Item>

                        <Form.Item name="engine" label="内核">
                            <Input placeholder="请输入内核" />
                        </Form.Item>

                        <Form.Item name="os" label="OS">
                            <Input placeholder="请输入OS" />
                        </Form.Item>

                        <Form.Item name="device" label="设备">
                            <Input placeholder="请输入设备" />
                        </Form.Item>
                        <div className={styles.btn}>
                            <Form.Item >
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </Form.Item></div>

                    </Form>
                </div>
                <div className={styles.table}>
                    <div>
                        <Table
                            rowKey="id"
                            dataSource={state.viewList}
                            columns={columns as any}
                            rowSelection={rowSelection}
                            scroll={{ x: 'calc(700px + 50%)' }}
                            style={{ overflow: "hidden" }}
                            pagination={false} />
                        <div className={styles.page}>
                            <ConfigProvider locale={zhCN}>
                                <Pagination
                                    style={{ float: "right", fontSize: "15px" }}
                                    total={state.viewLength}
                                    showTotal={total => `共${total}条`}
                                    onChange={(e) => { setPage(e) }}
                                    defaultPageSize={20}
                                    defaultCurrent={1}
                                    onShowSizeChange={(current, size) => { setSize(size) }}
                                />
                            </ConfigProvider>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


}
export default View